<template>
    <div class="title-container">
        <img src="/public/knot.png">
        <h1>{{ title }}</h1>
    </div>
</template>

<script>
export default {
    name: "site-title",
    props: ['title']
}
</script>

<style lang="less" scoped>
.title-container{

    margin: 0;
    height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding:5px 0;

    background-color:#f1f1f1;
    img {
        width: 25px;
        height: 25px;
    }
    h1 {
        margin: 0;
        margin-left:5px;
        margin-bottom:2px;
        font-weight: 500;
        font-size: 18px;
    }
}

</style>